<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<!-- 查询条件 -->
			<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
				<el-form-item label="角色名称" prop="name">
					<el-input v-model="state.queryParams.name" placeholder="请输入角色名称" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Search" :loading="state.loading" @click="getTableData">查询</el-button>
					<el-button icon="ele-Refresh" :loading="state.loading" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<!-- 功能按钮 -->
			<div class="system-role-btn mb15">
				<el-button type="primary" icon="ele-FolderAdd" class="ml10" @click="roleFormRef.openDialog()">新增</el-button>
			</div>

			<!-- 数据列表 -->
			<el-table :data="state.tableData" v-loading="state.loading"  @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="60" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="code" label="角色编码" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
						<el-tag type="info" v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<!-- 修改按钮 -->
						<el-button size="small" type="primary" text :disabled="scope.row.username === 'admin'" @click="roleFormRef.openDialog(scope.row.id)"
							>修改</el-button
						>
						<!-- 删除按钮 -->
						<el-popconfirm
							:title="`此操作将永久删除账户名称：“${scope.row.username}”，是否继续?`"
							width="230"
							@confirm="handleDelete([scope.row.id])"
						>
							<template #reference>
								<el-button size="small" type="primary" text :disabled="scope.row.username === 'admin'">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination
				class="mt15"
				v-model:current-page="state.pagination!.current"
				v-model:page-size="state.pagination!.size"
				:total="state.pagination!.total"
				:page-sizes="state.pagination!.pageSizes"
				:layout="state.pagination!.layout"
				@change="handlePaginationChange"
			>
			</el-pagination>
		</div>

		<RoleForm ref="roleFormRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRoleApi } from '/@/api/system/role';
import { useTable } from '/@/hooks/table';

// 引入组件
const RoleForm = defineAsyncComponent(() => import('./form.vue'));

// 定义变量内容
const roleFormRef = ref();
const queryFormRef = ref();
const state = reactive<BasicTableProps>({
	queryParams: {
		code: '',
		name: '',
	},
});

const { getTableData, handleSelectionChange, handlePaginationChange, handleDelete, resetQuery } = useTable(useRoleApi, queryFormRef, state);

</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
</style>
